<template>
	<view v-if="!loading" class="order-orderInfo">
		<view class="lists">
			<view class="list-item">
				<view class="title">基础信息</view>
				<view class="orderInfo-list">
					<view class="orderInfo-item">
						<view class="item-label">订单编号：</view>
						{{orderInfo.order_no}}
					</view>
					<view class="orderInfo-item">
						<view class="item-label">用户姓名：</view>
						{{orderInfo.user_name}}
					</view>
					<view class="orderInfo-item">
						<view class="item-label">用户手机：</view>
						{{orderInfo.user_phone}}
					</view>
					<view class="orderInfo-item">
						<view class="item-label">订单状态：</view>
						<view class="tags">
							<view v-if="orderInfo.order_status === -1" class="tag-item ">已取消</view>
							<view v-if="orderInfo.order_status === 1" class="tag-item tag-success">已完成</view>
							<view v-if="orderInfo.order_status === 2" class="tag-item tag-wait">待付款</view>
							<view v-if="orderInfo.order_status === 3" class="tag-item tag-wait">待确认</view>
							<view v-if="orderInfo.order_status === 4" class="tag-item tag-wait">待发货</view>
							<view v-if="orderInfo.order_status === 5" class="tag-item tag-wait">待收货</view>
						</view>
					</view>
					<view class="orderInfo-item">
						<view class="item-label">支付类型：</view>
						{{orderInfo.pay_type ? '定金' : '全款'}}
					</view>
					<view class="orderInfo-item">
						<view class="item-label">订单备注：</view>
						{{orderInfo.remark ? orderInfo.remark : '无'}}
					</view>
					<view v-if="orderInfo.is_order_affirm" class="orderInfo-item">
						<view class="item-label">订单确认描述：</view>
						{{orderInfo.order_affirm_desc ? orderInfo.order_affirm_desc : '无'}}
					</view>
					<view v-if="orderInfo.is_order_affirm" class="orderInfo-item">
						<view class="item-label">订单确认时间：</view>
						{{orderInfo.order_affirm_time}}
					</view>
				</view>
			</view>

			<view class="list-item">
				<view class="flex align-center" style="gap: 28rpx;">
					<view class="title">费用清单</view>
				</view>
				
				<view style="padding-top: 36rpx;">
					<view class="flex align-center justify-between">
						<view class="total">
							<text class="total-title">合计</text>
							<text>(含运费)：</text>
						</view>
						<view class="total-price">
							<text class="price-unit">￥</text>
							<text>{{orderInfo.pay_total_fee | formatPrice($formatPrice, '')}}</text>
						</view>
					</view>
					<view v-if="orderInfo.pay_deposit_fee && !orderInfo.have_pay_fee && orderInfo.pay_type === 1 && orderInfo.order_status === 2" class="flex align-center justify-between" style="padding-top: 14rpx;">
						<view class="preferential">
							<text>需支付订金：</text>
						</view>
						<view class="total-price detial-btn">
							<text class="price-unit">¥</text>
							<text>{{orderInfo.pay_deposit_fee | formatPrice($formatPrice, '')}}</text>
						</view>
					</view>
					<view v-if="orderInfo.parcel_fee" class="flex align-center justify-between" style="padding-top: 14rpx;">
						<view class="preferential">
							<text>需付快递费：</text>
						</view>
						<view class="total-price detial-btn">
							<text class="price-unit">¥</text>
							<text>{{orderInfo.parcel_fee | formatPrice($formatPrice, '')}}</text>
						</view>
					</view>
					<view v-if="orderInfo.have_pay_fee" class="flex align-center justify-between" style="padding-top: 14rpx;">
						<view class="preferential">
							<text>已支付金额：</text>
						</view>
						<view class="total-price detial-btn">
							<text class="price-unit">¥</text>
							<text>{{orderInfo.have_pay_fee | formatPrice($formatPrice, '')}}</text>
						</view>
					</view>
					<view v-if="orderInfo.unpaid_fee" class="flex align-center justify-between" style="padding-top: 14rpx;">
						<view class="preferential">
							<text>待支付金额：</text>
						</view>
						<view class="total-price detial-btn">
							<text class="price-unit">¥</text>
							<text>{{orderInfo.unpaid_fee | formatPrice($formatPrice, '')}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="list-item">
				<view class="flex align-center" style="gap: 28rpx;">
					<view class="title">选购产品清单</view>
				</view>
				
				<view class="product-lists">
					<view class="product-item" v-for="item in orderInfo.product" :key="item">
						<view class="orderInfo-list">
							<view class="orderInfo-item">产品名称：{{item.product_title}}</view>
							<view class="orderInfo-item">数量：{{item.quantity}}台</view>
							<view v-if="item.relation && item.relation.length" class="orderInfo-item">服务：
							<block v-if="item.relation && item.relation.length">
								<text v-for="(relation, idx) in item.relation" :key="idx">{{relation.product_title}}{{idx < item.relation.length-1 ? '、' : ''}}</text>
							</block>
							<text v-else>无</text>
							</view>
							<view class="orderInfo-item">金额：{{item.total_price | formatPrice($formatPrice)}}元</view>
						</view>
						<view class="item-img">
							<image :src="item.product_thumb" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		
			<view class="list-item">
				<view class="title">地址信息</view>
				<view class="orderInfo-list">
					<view class="orderInfo-item">
						<view class="item-label">姓名：</view>
						{{orderInfo.address_mark_data.linkman}}
					</view>
					<view class="orderInfo-item">
						<view class="item-label">手机号：</view>
						{{orderInfo.address_mark_data.phone}}
					</view>
					<view class="orderInfo-item">
						<view class="item-label">收货地址：</view>
						{{orderInfo.address_mark_data.province}}{{orderInfo.address_mark_data.city}}{{orderInfo.address_mark_data.area}}{{orderInfo.address_mark_data.address}}
					</view>
				</view>
			</view>
			
			<view v-if="orderInfo.is_send_delivery === 1" class="list-item">
				<view class="title">物流信息</view>
				<view class="orderInfo-list">
					<view class="orderInfo-item">
						<view class="item-label">快递公司：</view>
						{{orderInfo.delivery_name}}
					</view>
					<view class="orderInfo-item">
						<view class="item-label">快递单号：</view>
						{{orderInfo.delivery_no}}
					</view>
					<view class="orderInfo-item">
						<view class="item-label">发货时间：</view>
						{{orderInfo.delivery_send_time}}
					</view>
					<view class="orderInfo-item">
						<view class="item-label">签收时间：</view>
						{{orderInfo.delivery_sign_time}}
					</view>
					<view class="orderInfo-item">
						<view class="item-label">发货状态：</view>
						<view class="tags">
							<view v-if="orderInfo.is_send_delivery === 1" class="tag-item tag-success">已发货</view>
							<view v-else class="tag-item tag-wait">待发货</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view v-if="orderInfo.order_status === -1" class="tag-item ">已取消</view>
		<view v-if="orderInfo.order_status === 1" class="tag-item tag-success">已完成</view>
		<view v-if="orderInfo.order_status === 2" class="tag-item tag-wait">待付款</view>
		<view v-if="orderInfo.order_status === 3" class="tag-item tag-wait">待确认</view>
		<view v-if="orderInfo.order_status === 4" class="tag-item tag-wait">待发货</view>
		<view v-if="orderInfo.order_status === 5" class="tag-item tag-wait">待收货</view> -->
		
		
		<!-- orderInfo.order_status === -1 ||  orderInfo.order_status === 1 -->
		<view v-if="
		orderInfo.order_status === 2 || 
		orderInfo.order_status === 5" class="footer-btns">
			<button v-if="orderInfo.order_status === 2" class="cancel-btn flex-1" @click="handleCancel">取消订单</button>
			<!-- <button v-if="orderInfo.order_status === -1 || orderInfo.order_status === 1" class="cancel flex-1" @click="handleDelete">删除订单</button> -->
			<button v-if="orderInfo.order_status === 5" class="confirm-btn flex-3" @click="handleVerify">确认收货</button>
			<button v-if="orderInfo.order_status === 2 && orderInfo.unpaid_fee" class="confirm flex-3" @click="agentPayCreate">立即支付</button>
		</view>
		
		<!-- 对话框 -->
		<com-dialog ref="dialog" open-type="" title="删除" content="是否确认删除订单" cancelButtonText="取消" confirmButtonText="确认" @success="handleDeleteOrder"></com-dialog>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import formatPrice from '@/mixins/formatPrice.js';
	
	export default {
		mixins:[formatPrice],
		data() {
			return {
				orderInfo: {},
				loading: true,
				isSuccess: false,
			};
		},
		computed: {
			...mapState('login', ['info'])
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.loading = true
				this.isSuccess = false
				this.$api.agentOrderDetailsApi(this.orderId).then(res => {
					this.orderInfo = res.data
					this.orderInfo.address_mark_data = JSON.parse(this.orderInfo.address_mark_data)
					this.isSuccess = true
					console.log('orderInfo', this.orderInfo);
				}).catch(err => {
					console.log('err', err);
				}).finally(()=> {
					this.loading = false
				})
			},
			// 取消订单
			handleCancel() {
				uni.$emit('show-dialog', {
					title: '删除',
					content: '是否确认删除订单',
					cancelButtonText: '取消',
					confirmButtonText: '确认',
					onConfirm: () => {
						this.handleCancelOrder()
						uni.$emit('hide-dialog')
					},
					onCancel: () => {
						uni.$emit('hide-dialog')
					},
				})
			},
			handleCancelOrder() {
				this.$api.agentOrderCancelApi(this.orderId, 0).then(res=> {
					uni.showToast({
						icon: 'none',
						title: '取消成功'
					})
					this.getInfo()
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 删除订单
			handleDelete() {
				uni.$emit('show-dialog', {
					title: '删除',
					content: '是否确认删除订单',
					cancelButtonText: '取消',
					confirmButtonText: '确认',
					onConfirm: () => {
						this.handleDeleteOrder()
						uni.$emit('hide-dialog')
					},
					onCancel: () => {
						uni.$emit('hide-dialog')
					},
				})
			},
			handleDeleteOrder() {
				this.$api.agentOrderDeleteApi(this.orderId, 0).then(res=> {
					uni.showToast({
						icon: 'none',
						title: '删除成功'
					})
					this.getInfo()
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 确认收货
			handleVerify() {
				this.$api.agentOrderVerifyApi(this.orderId).then(res=> {
					uni.showToast({
						title: '签收成功'
					})
					this.getInfo()
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 继续支付
			async agentPayCreate() {
				const {
					code
				} = await uni.login()
				const params = {
					appid: this.$store.state.common.appid, // string 必需 微信小程序appid
					order_gid: this.orderInfo.gid, // string 订单gid 必需 示例值: 71e3f23b-b20d-4877-b32a-b2fd23a7ddc8
					code: code, // string  必需 wx.login中的code
					order_price: this.orderInfo.unpaid_fee, // number 订单支付金额 必需 示例值: 1332
				}
				this.$api.agentPayCreateApi(params).then(res => {
					uni.showLoading({
						title: '支付中···'
					})
					uni.requestPayment({
						provider: "wxpay",
						orderInfo: {},
						...res.data,
						success: (res) => {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '支付成功'
							})
							this.getInfo()
						},
						fail: (err) => {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
							console.log('err', err);
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-orderInfo {
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.lists {
		padding: 52rpx 32rpx;

		.list-item {
			padding: 32rpx;
			margin-bottom: 32rpx;
			border-radius: 26rpx;
			background-color: #FFFFFF;
		}

		.title {
			color: #000000;
			font-size: 34rpx;
			font-weight: 400;
			text-align: left;
			line-height: 46rpx;
		}

		.orderInfo-list {
			gap: 8rpx;
			display: flex;
			padding-top: 18rpx;
			flex-direction: column;
		}

		.orderInfo-item {
			color: #999999;
			font-size: 26rpx;
			text-align: left;
			font-weight: 400;
			line-height: 36rpx;

			display: flex;
			
			.item-label {
				flex-shrink: 0;
			}
		}
		
		.product-lists {
			
			.product-item {
				display: flex;
				align-items: center;
				padding-top: 36rpx;
				padding-bottom: 36rpx;
				justify-content: space-between;
				border-bottom: 1px solid #F1F1F1;
			}
			
			.orderInfo-list {
				padding: 0;
			}
			
			.item-img {
				width: 154rpx;
				height: 154rpx;
				overflow: hidden;
				border-radius: 12rpx;
				background-color: #F6F6F6;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.total {
			font-size: 20rpx;
			font-weight: 400;
			line-height: 28rpx;
			text-align: left;
			color: rgba(0, 0, 0, 0.4);
		}
		
		.total-title {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 38rpx;
			text-align: left;
			color: #000000;
		}
		
		.total-price {
			font-size: 34rpx;
			font-weight: 700;
			line-height: 38rpx;
			text-align: left;
			color: #000000;
		}
		
		.price-unit {
			font-size: 20rpx;
			font-weight: 400;
			line-height: 28rpx;
			text-align: left;
		}
		
		.preferential {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 38rpx;
			text-align: left;
			color: rgba(0, 0, 0, 1);
		}
		
		.detial-btn {
			color: #FF754C;
		}
		
		.tags {
			display: flex;
			align-items: center;
			gap: 10rpx;
		}

		.tag-item {
			display: flex;
			align-items: center;
			justify-content: center;

			padding: 4rpx 8rpx;
			border-radius: 8rpx;
			background-color: #868686;

			color: #FFFFFF;
			font-size: 18rpx;
			font-weight: 400;
			line-height: 24rpx;
			text-align: left;
		}

		.tag-success {
			background-color: #009D6E;
		}

		.tag-complate {
			background-color: #D4D4D4;
		}

		.tag-wait {
			background-color: #003D99;
		}

		.item-btn {
			padding: 0;
			margin: 0;
			height: 62rpx;
			border-radius: 26rpx;
			background: var(--gradient-color-vertical);

			display: flex;
			align-items: center;
			justify-content: center;

			&::after {
				border: none;
			}

			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 38rpx;
			text-align: left;
		}

		.product-list {
			display: flex;
			flex-direction: column;
			gap: 24rpx;
		}

		.product-item {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.product-thumb {
				width: 90rpx;
				height: 90rpx;
				padding: 8rpx;
				overflow: hidden;
				margin-right: 16rpx;
				border-radius: 12rpx;
				box-sizing: border-box;
				background-color: rgba(0, 0, 0, 0.06);

				image {
					width: 100%;
					height: 100%;
				}
			}

			.product-title {
				color: #000000;
				font-size: 32rpx;
				font-weight: 400;
				text-align: left;
				line-height: 46rpx;
			}

			.product-price {
				color: #000000;
				font-size: 32rpx;
				font-weight: 400;
				text-align: left;
				line-height: 46rpx;
			}

			.quantity {
				color: rgba(0, 0, 0, 0.4);
				font-size: 26rpx;
				font-weight: 400;
				text-align: right;
				line-height: 36rpx;
			}
		}

		.relation {
			padding: 16rpx 16rpx;
			margin-top: 16rpx;
			margin-left: 24rpx;
			border-radius: 12rpx;
			background-color: #F2F2F2;

			.product-thumb {
				width: 56rpx;
				height: 56rpx;
			}

			.product-title {
				color: #000000;
				font-size: 26rpx;
				font-weight: 400;
				text-align: left;
				line-height: 36rpx;
			}

			.product-price {
				color: #000000;
				font-size: 26rpx;
				font-weight: 400;
				text-align: left;
				line-height: 36rpx;
			}
		}

	}

	.footer-btns {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: 999;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		gap: 14rpx;
		display: flex;
		align-items: center;

	}
</style>